<template>
  <!-- 我喜欢的音乐 -->
  <div class="song">
    <p class="title"
       @click="fold=!fold"><i class="iconfont icon-you"
         v-if="fold"></i><i v-else
         class="iconfont icon-xia"></i> 创建的歌单</p>
    <div :class="{fold:fold}">
      <dd v-for="(item,index) in createList"
          :key="'info-'+index"
          @click="enterDetail(index)">
        <div class="left">
          <img :src="item.coverImgUrl"
               alt />
        </div>
        <div class="right">
          <p>{{item.name}}</p>
          <p>{{item.trackCount}}首</p>
        </div>
      </dd>
    </div>
    <p class="title"
       @click="fold1=!fold1"><i class="iconfont icon-you"
         v-if="fold1"></i> <i class="iconfont icon-xia"
         v-else></i> 收藏的歌单</p>
    <div :class="{fold1:fold1}">
      <dd v-for="(item,index) in addList"
          :key="index"
          @click="enterDetails(index)">
        <div class="left">
          <img :src="item.coverImgUrl"
               alt />
        </div>
        <div class="right">
          <p>{{item.name}}</p>
          <p>{{item.trackCount}}首
          </p>
        </div>
      </dd>
    </div>
  </div>
</template>
<script>
import { _getSongList } from 'network/user'
import { _collMusic } from 'network/detail'
export default {
  name: 'MySongList',
  data () {
    return {
      // 我创建的歌单
      createList: [],
      // 我收藏的歌单
      addList: [],
      fold: false,
      fold1: false
    }
  },
  mounted () {
    _getSongList(this.$store.getters.getUserId).then(res => {
      // 获取创建的歌单
      for (var x of res.data.playlist) {
        if (x.creator.nickname === this.$store.getters.getUserName) {
          this.createList.push(x);
        } else {
          this.addList.push(x);
        }
      }
      this.$store.addList = this.addList;
      this.$store.createList = this.createList;
    })
  },
  methods: {
    enterDetail (index) {
      // 传入我创建的歌单的id
      this.$router.push("/musiclistdetail/" + this.$store.createList[index].id + "/" + new Date().getTime());
    },
    enterDetails (index) {
      // 传入我创建的歌单的id
      this.$router.push("/musiclistdetail/" + this.$store.addList[index].id + "/" + new Date().getTime());
    }
  }
}
</script>
<style scoped>
.title {
  margin: 10px 0px;
}
.tri1,
.tri2 {
  display: inline-block;
  width: 0;
  height: 0;
  border-width: 8px;
  border-style: solid;
}
.song dd {
  width: 90%;
  height: 35px;
  margin: 5px 15px;
  font-size: 14px;
  opacity: 1;
  display: flex;
  overflow: hidden;
  color: #000;
}
.song dd .left {
  height: 100%;
  width: 15%;
}
.left img {
  width: 30px;
  height: 30px;
}
.right {
  flex: 1;
}
.right p {
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 10px;
}
.right p:nth-child(2) {
  color: rgb(163, 163, 163);
}
p span {
  float: right;
  margin-right: 1px;
  color: #333;
}
.fold,
.fold1 {
  height: 0;
  overflow: hidden;
}
/* 点击取消收藏 */
.icon-you {
  font-size: 20px;
  color: #adadad;
}
.icon-xia {
  color: #adadad;
}
</style>
